<template>
	<view class="all" style="padding: 20upx 0;">
		<view class="top">
			<view :class="chongzhi_key == 1?'top_boxs':'top_box'" @click="chongzhi(1)">
				<image src="../../static/icon/10.png" mode="aspectFit" class="top_box_img"></image>
				<view class="top_box_text">支付宝</view>
			</view>
			<view :class="chongzhi_key == 2?'top_boxs':'top_box'" @click="chongzhi(2)">
				<image src="../../static/icon/11.png" mode="aspectFit" class="top_box_img"></image>
				<view class="top_box_text">微信</view>
			</view>
			<view :class="chongzhi_key == 3?'top_boxs':'top_box'" @click="chongzhi(3)">
				<image src="../../static/icon/12.png" mode="aspectFit" class="top_box_img"></image>
				<view class="top_box_text">银行卡</view>
			</view>
		</view>
		<view class="z_list">
			<view v-if="chongzhi_key == 1">
				<image :src="user_list.alipay_image" mode="widthFix" class="z_list_img"></image>
				<view style="display: flex;justify-content: center;">
					<view class="baocun" @click="baocun(user_list.alipay_image)">保存图片</view>
				</view>
			</view>
			<view v-if="chongzhi_key == 2">
				<image :src="user_list.wechat_image" mode="widthFix" class="z_list_img"></image>
				<view style="display: flex;justify-content: center;">
					<view class="baocun" @click="baocun(user_list.wechat_image)">保存图片</view>
				</view>
			</view>
			<view v-if="chongzhi_key == 3">
				<view class="yinlian" @click="copy_tap(user_list.bank_name)">
					<view class="yinlian_text"> 银行户名：{{user_list.bank_name}} </view>
					<view class="yinlian_texts"> 复制 </view>
				</view>
				<view class="yinlian" @click="copy_tap(user_list.bank_card)">
					<view class="yinlian_text"> 银行账号：{{user_list.bank_card}} </view>
					<view class="yinlian_texts"> 复制 </view>
				</view>
				<view class="yinlian" @click="copy_tap(user_list.bank)">
					<view class="yinlian_text"> 银行名称：{{user_list.bank}} </view>
					<view class="yinlian_texts"> 复制 </view>
				</view>
				<view class="yinlian" @click="copy_tap(user_list.bank_address)">
					<view class="yinlian_text"> 银行支行：{{user_list.bank_address}} </view>
					<view class="yinlian_texts"> 复制 </view>
				</view>
			</view>
			<view class="list">
				<view class="list_box">
					<view class="list_box_text">当前余额</view>
					<view class="list_box_text">{{money}}</view>
				</view>
				<view class="list_box">
					<view class="list_box_text">充值数额</view>
					<input placeholder="请输入" type="number" maxlength="10" class="list_box_input" @input="input_tap"/>
				</view>
				<view class="list_box">
					<view class="list_box_text">完成转账截图</view>
					<image @click="chooseImage" class="list_box_img" v-if="image == ''" src="../../static/icon/13.png" mode="aspectFit"></image>
					<image @click="chooseImage" class="list_box_img" v-if="image != ''" :src="image" mode="aspectFit"></image>
				</view>
				<view class="list_box">
					<view class="list_box_text">交易密码</view>
					<input placeholder="请输入" type="password" maxlength="10" class="list_box_input" @input="mima_tap"/>
				</view>
			</view>
		</view>
		<view class="tishi">
			温馨提示：转出前请务必确认账户信息无误，已经转出则不可撤销，请仔细核对。
		</view>
		<view class="queren">
			<view :class="queren_key == 1?'queren_texts':'queren_text'" @click="user_recharge_api"> 确认充值 </view>
		</view>
	</view>
</template>

<script>
	import urlConfig from 'common/config.js';
	export default {
		data() {
			return {
				chongzhi_key:1,
				queren_key:0,
				shue:'',
				password:'',
				image:"",
				user_list:{},
				money:0
			}
		},
		onLoad() {
			this.index_config_api()
			this.user_assets_api()
		},
		methods: {
			copy_tap(num) {
				uni.setClipboardData({
					data: num,
					success: function () {
						console.log('success');
					}
				});
			},
			//普通商品
			index_config_api() {
				var that = this
				that.$request(that.$Api.index_config_api, {
					access_token: uni.getStorageSync('access_token'),
				}, "POST").then(res => {
					if (res.data.code == 0) {
						that.user_list = res.data.data
					} else {
						uni.showToast({
							title: res.data.msg,
							duration: 2000,
							icon: 'none'
						});
					}
				})
			},
			baocun(image) {
				uni.downloadFile({
					url: image,
					success: (res) =>{
						if (res.statusCode === 200){
							uni.saveImageToPhotosAlbum({
								filePath: res.tempFilePath,
								success: function() {
									uni.showToast({
										title: "保存成功",
										icon: "none"
									});
								},
								fail: function() {
									uni.showToast({
										title: "保存失败",
										icon: "none"
									});
								}
							});
						}
					}
				})
			},
			chooseImage() {
				var that = this
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: function (res) {
						uni.uploadFile({
							url: urlConfig.Url + 'upload/save-img',
							filePath: res.tempFilePaths[0],
							name: 'file',
							formData: {
								'user': 'test'
							},
							success: (uploadFileRes) => {
								console.log(uploadFileRes.data);
								that.image = uploadFileRes.data
								that.queren_key_tap()
							}
						});
					}
				});
			},
			
			chongzhi(num) {
				this.chongzhi_key = num
			},
			input_tap(num) {
				this.shue = num.detail.value
				this.queren_key_tap()
			},
			mima_tap(num) {
				this.password = num.detail.value
				this.queren_key_tap()
			},
			queren_key_tap() {
				if( this.shue != '' && this.password != '' && this.image != '' ) {
					this.queren_key = 1
				}else{
					this.queren_key = 0
				}
			},
			//充值
			user_recharge_api() {
				var that = this
				if( that.queren_key == 0 ) {
					return
				}
				that.$request(that.$Api.user_recharge_api, {
					access_token: uni.getStorageSync('access_token'),
					money:that.shue,
					password:that.password,
					image:that.image,
				}, "POST").then(res => {
					if (res.data.code == 0) {
						that.user_assets_api()
						uni.showToast({
							title: res.data.msg,
							duration: 2000,
							icon: 'none'
						});
						setTimeout(function () {
							uni.navigateBack()
						}, 2000);
					} else {
						uni.showToast({
							title: res.data.msg,
							duration: 2000,
							icon: 'none'
						});
					}
				})
			},
			//首页
			user_assets_api() {
				var that = this
				that.$request(that.$Api.user_assets_api, {
					access_token: uni.getStorageSync('access_token'),
				}, "POST").then(res => {
					if (res.data.code == 0) {
						that.money = res.data.data.money
					} else {
						uni.showToast({
							title: res.data.msg,
							duration: 2000,
							icon: 'none'
						});
					}
				})
			},
		}
	}
</script>

<style lang="less">
	page{
		.all{
			.queren{
				.queren_text{
					width: 700upx;
					border-radius: 20upx;
					text-align: center;
					line-height: 80upx;
					height: 80upx;
					background: #999;
					color: #fff;
					margin-left: 25upx;
				}
				.queren_texts{
					width: 700upx;
					border-radius: 20upx;
					text-align: center;
					line-height: 80upx;
					height: 80upx;
					background: #ff0000;
					color: #fff;
					margin-left: 25upx;
				}
				width: 750upx;
				padding: 10upx 0;
				background: #fff;
				position: fixed;
				bottom: 0;
				z-index: 2;
			}
			.tishi{
				width: 700upx;
				font-size: 22upx;
				padding: 25upx 25upx 130upx 25upx;
				color: #999;
			}
			.z_list{
				.yinlian{
					.yinlian_texts{
						font-size: 28upx;
						color: #999;
					}
					.yinlian_text{
						width: 600upx;
						font-size: 28upx;
						color: #999;
					}
					width: 700upx;
					padding: 20upx 0;
					display: flex;
					justify-content: space-between;
				}
				.list{
					.list_box{
						.list_box_img{
							width: 200upx;
							height: 200upx;
						}
						.list_box_input{
							text-align: right;
							font-size: 32upx;
							font-weight: bold;
						}
						.list_box_text{
							font-size: 32upx;
							font-weight: bold;
						}
						display: flex;
						justify-content: space-between;
						padding: 20upx 0;
					}
					width: 700upx;
					padding-bottom: 20upx;
				}
				.baocun{
					width: 200upx;
					text-align: center;
					font-size: 28upx;
					margin-top: 25upx;
					background: #eee;
					text-align: center;
					height: 60upx;
					line-height: 60upx;
					border-radius: 20upx;
				}
				.z_list_img{
					width: 600upx;
					margin-left: 50upx;
				}
				width: 700upx;
				padding: 25upx;
			}
			.top{
				.top_boxs{
					padding-bottom: 20upx;
					border-bottom: 1upx solid #ff0000;
					.top_box_text{
						font-size: 28upx;
						color: #ff0000;
						line-height: 60upx;
						text-align: center;
					}
					.top_box_img{
						width: 100upx;
						height: 100upx;
					}
				}
				.top_box{
					padding-bottom: 20upx;
					border-bottom: 1upx solid #fff;
					.top_box_text{
						font-size: 28upx;
						color: #333;
						line-height: 60upx;
						text-align: center;
					}
					.top_box_img{
						width: 100upx;
						height: 100upx;
					}
				}
				width: 750upx;
				display: flex;
				justify-content: space-around;
			}
		}
	}
</style>
